<template>
    <div class="fillcontain">
        <div class="table_container">
            <el-table                
                :data='tableData'
                max-height="450"
                border
                style="width: 100%"
                >
                 <el-table-column
                    :formatter="indexFormatter"
                    label="序号"
                    align='center'
                    width="70">
                </el-table-column>

                <el-table-column
                    prop="number"
                    label="学号"
                    align='center'
                    width="200">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.number }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="moduleA"
                    label="模块A"
                    align='center'
                    width="150">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.moduleA }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="moduleB"
                    label="模块B"
                    align='center'
                    width="180">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.moduleB }}</span>
                    </template>
                    
                </el-table-column>

                <el-table-column
                    prop="moduleC"
                    label="模块C"
                    align='center'
                    width="180">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.moduleC }}</span>
                    </template>                    
                </el-table-column>

                <el-table-column
                    prop="moduleD"
                    label="模块D"
                    align='center'
                    width="180">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.moduleD }}</span>
                    </template>                    
                </el-table-column>

                <el-table-column
                    prop="moduleE"
                    label="模块E"
                    align='center'
                    width="180">
                    <template slot-scope="scope">  
                        <span style="color:#00d053">{{ scope.row.moduleE }}</span>
                    </template>                    
                </el-table-column>
            </el-table>
            <!-- 分页 -->
             <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            v-if='pagination.total > 0'
                            :page-sizes="pagination.page_sizes"
                            :page-size="pagination.page_size"
                            :layout="pagination.layout"
                            :total="pagination.total"
                            :current-page.sync='pagination.page_index'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 方法测试按钮 -->    
        <!-- <button class="btn btn-primary" @click="todelete">删除</button>
        <button class="btn btn-primary" @click="tocompute">计算</button>
        <button class="btn btn-primary" @click="toset">set</button>
        <button class="btn btn-primary" @click="getProfile()">get</button> -->
         
    </div>
</template>

<script>
export default {
  name: "analysis",
  data() {
    return {
      tableData:[],
      filtermateData:[],

      allTableData: [],    
      form: {
        number: "",
        moduleA: "",
        moduleB: "",
        moduleC: "",
        moduleD: "",
        moduleE: "",
        id: ""
      },
      //需要给分页组件传的信息
      pagination: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 5, // 1页显示多少条
        page_sizes: [5, 10, 15, 20], //每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper" // 翻页属性
      },
    };
  },  
  created() {
   this.getAnalysis();
  },
  methods: {
    async getAnalysis() {
      try{
        await this.todelete();
        await this.tocompute();
        await this.toset();
        await this.getProfile();
      }catch(error){
        console.log(error)}         
    },
    async getProfile() {      
      try{
        const res = await this.$axios("/api/profiles/getinit");
        //赋值给allTableData，分页时过滤成tableData
        this.allTableData = res.data
        //对tallTableData按number排序
        this.allTableData.sort(function(a, b) {
          return a.number - b.number;
        });
        this.setPagination()
        
        return res;
      }catch(error){
        console.log(error)
      }   
    }, 
    async tocompute(){
      try{
        //获取所有自评材料
        const res = await this.$axios("/api/profiles/mate");
        let mateData = res.data;
        let filtermateData = [];
        let sumA = 0;
        let sumB = 0;
        let sumC = 0;
        let sumD = 0;
        let sumE = 0;
        //遍历mateData，对同一学号的module进行判断，同一module的grade求和，并添加到filtermateData中
        for (let i = 0; i < mateData.length; i++) {
          // 判断filtermateData是否有该学号
          let index = filtermateData.findIndex(item => item.number === mateData[i].number);
          // 如果没有则添加，如果有则更新
          if (index === -1) {
            if (mateData[i].module === "A") sumA = mateData[i].grade;
            if (mateData[i].module === "B") sumB = mateData[i].grade;
            if (mateData[i].module === "C") sumC = mateData[i].grade;
            if (mateData[i].module === "D") sumD = mateData[i].grade;
            if (mateData[i].module === "E") sumE = mateData[i].grade;
            filtermateData.push({
              number: mateData[i].number,
              moduleA: sumA,
              moduleB: sumB,
              moduleC: sumC,
              moduleD: sumD,
              moduleE: sumE
            });
          } else {
            if (mateData[i].module === "A") filtermateData[index].moduleA += mateData[i].grade;
            if (mateData[i].module === "B") filtermateData[index].moduleB += mateData[i].grade;
            if (mateData[i].module === "C") filtermateData[index].moduleC += mateData[i].grade;
            if (mateData[i].module === "D") filtermateData[index].moduleD += mateData[i].grade;
            if (mateData[i].module === "E") filtermateData[index].moduleE += mateData[i].grade;
          }
        } 
        //遍历结束，将filtermateData赋值给this.filtermateData
        this.filtermateData = filtermateData;
        // console.log("计算完成")
        return res;          
      }catch(error)
      {console.log(error)}         
    },
    //POST api/profiles/addinitall
    async toset() {
      try{
        //将filtermateData中的数据发送给后端，存储进模块表UseerInit中
        const res = await this.$axios.post("/api/profiles/addinitall", this.filtermateData);        
        // console.log("设置成功")
        return res;
      }catch(error){
        console.log(error)}  
    },
    //DELETE api/profiles/deleteinitall
    async todelete() {
      try {
        //删除模块表UseerInit中的所有数据
        const res = await this.$axios.delete("/api/profiles/deleteinitall");        
        // console.log("删除成功");
        return res;
      } catch (error) {
        console.error("删除错误：", error);
        throw error;
      }
    },
    //实现分页功能
    setPagination() {
            //初始化分页
            this.pagination.total = this.allTableData.length
            this.pagination.currentPage = 1
            this.pagination.pageSize = 5
            //设置分页数据
            this.tableData = this.allTableData.filter((item, index) => {
                return index < this.pagination.pageSize
            })
    },
    //改变每页条数
    handleSizeChange(size) {
            this.pagination.currentPage = 1
            this.pagination.pageSize = size
            this.tableData = this.allTableData.filter((item, index) => {
                return index < this.pagination.pageSize                
            })
    },
    //改变当前页
    handleCurrentChange(currentPage) {
            this.pagination.currentPage = currentPage
            this.tableData = this.allTableData.filter((item, index) => {
                return (index >= (currentPage - 1) * this.pagination.pageSize) && (index < currentPage * this.pagination.pageSize)
            })

    },
    // 序号在分页后延续原序号
    indexFormatter(row,column,cellValue,index) {        
        return index + 1 + (this.pagination.currentPage - 1) * this.pagination.pageSize;

    },   
    
  }
};

</script>
<style scoped>
.fillcontain {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
.table_container{
  text-align: center;
}
</style>